<!DOCTYPE html>
<html lang="en" class="no-js">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
		<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
		<title>Animated Opening Type</title>
		<meta name="description" content="Animated Opening Type: Animated letters with pseudo-elements" />
		<meta name="keywords" content="pseudo-elements, letters, css, animated, transition, opening, cut-out, inspiration" />
		<link rel="stylesheet" type="text/css" href="css/normalize.css" />
		<link rel="stylesheet" type="text/css" href="css/demo.css" />
		<link rel="stylesheet" type="text/css" href="css/component.css" />
		<script src="js/modernizr.custom.js"></script>
	</head>
	<body>
		<div class="container">
			<div class="component">
				<ul class="grid">
					<li class="ot-letter-left"><span data-letter="C">C</span></li>
					<li class="ot-letter-top"><span data-letter="J">J</span></li>
					<li class="ot-letter-right"><span data-letter="8">8</span></li>
					<li class="ot-letter-bottom"><span data-letter="A">A</span></li>
					<li class="ot-letter-left"><span data-letter="O">O</span></li>
					<li class="ot-letter-left"><span data-letter="Q">Q</span></li>
					<li class="ot-letter-right"><span data-letter="S">S</span></li>
					<li class="ot-letter-left"><span data-letter="B">B</span></li>
					<li class="ot-letter-top"><span data-letter="L">L</span></li>
					<li class="ot-letter-right"><span data-letter="T">T</span></li>
					<li class="ot-letter-left"><span data-letter="K">K</span></li>
					<li class="ot-letter-top"><span data-letter="S">S</span></li>
					<li class="ot-letter-left"><span data-letter="Z">Z</span></li>
					<li class="ot-letter-top"><span data-letter="3">3</span></li>
					<li class="ot-letter-right"><span data-letter="D">D</span></li>
					<li class="ot-letter-bottom"><span data-letter="I">I</span></li>
					<li class="ot-letter-right"><span data-letter="H">H</span></li>
					<li class="ot-letter-bottom"><span data-letter="Q">Q</span></li>
					<li class="ot-letter-right"><span data-letter="E">E</span></li>
					<li class="ot-letter-left"><span data-letter="A">A</span></li>
					<li class="ot-letter-top"><span data-letter="P">P</span></li>
					<li class="ot-letter-right"><span data-letter="F">F</span></li>
					<li class="ot-letter-left"><span data-letter="S">S</span></li>
					<li class="ot-letter-top"><span data-letter="K">K</span></li>
					<li class="ot-letter-left"><span data-letter="U">U</span></li>
					<li class="ot-letter-top"><span data-letter="L">L</span></li>
					<li class="ot-letter-right"><span data-letter="6">6</span></li>
					<li class="ot-letter-bottom"><span data-letter="R">R</span></li>
					<li class="ot-letter-left"><span data-letter="O">O</span></li>
					<li class="ot-letter-bottom"><span data-letter="V">V</span></li>
					<li class="ot-letter-right"><span data-letter="S">S</span></li>
					<li class="ot-letter-left"><span data-letter="Q">Q</span></li>
					<li class="ot-letter-top"><span data-letter="J">J</span></li>
					<li class="ot-letter-right"><span data-letter="G">G</span></li>
					<li class="ot-letter-left"><span data-letter="R">R</span></li>
				</ul>
			</div>
		</div><!-- /container -->
	</body>
</html>